<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>欢迎页面-L-admin1.0</title>
    <meta content="webkit" name="renderer">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"
          name="viewport"/>
    <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon"/>
    <link href="../css/font.css" rel="stylesheet">
    <link href="../lib/layui/css/layui.css" rel="stylesheet" type="text/css">
    <link href="../lib/layui/css/global.css" rel="stylesheet" type="text/css">
    <style>
        .site-doc-icon li {
            width: 222px;
        }

        .site-doc-icon li .layui-anim {
            width: 150px;
            height: 150px;
            line-height: 150px;
            margin: 0 auto 10px;
            text-align: center;
            background-color: #009688;
            cursor: pointer;
            color: #fff;
            border-radius: 50%;
        }
    </style>
    <script src="../js/jquery.min.js"></script>
    <script src="../lib/layui/layui.js"></script>
    <script src="../js/xadmin.js" type="text/javascript"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body class="layui-fluid">
    <fieldset class="layui-elem-field layui-field-title mar-t30">
        <legend>动画过程演示</legend>
    </fieldset>

    <ul class="site-doc-icon site-doc-anim">
        <li>
            <div class="layui-anim" data-anim="layui-anim-up">从最底部往上滑入</div>
            <div class="code">layui-anim-up</div>
        </li>
        <li>
            <div class="layui-anim" data-anim="layui-anim-upbit">微微往上滑入</div>
            <div class="code">layui-anim-upbit</div>
        </li>
        <li>
            <div class="layui-anim" data-anim="layui-anim-scale">平滑放大</div>
            <div class="code">layui-anim-scale</div>
        </li>
        <li>
            <div class="layui-anim" data-anim="layui-anim-scaleSpring">弹簧式放大</div>
            <div class="code">layui-anim-scaleSpring</div>
        </li>
    </ul>
    <ul class="site-doc-icon site-doc-anim">
        <li>
            <div class="layui-anim" data-anim="layui-anim-fadein">渐现</div>
            <div class="code">layui-anim-fadein</div>
        </li>
        <li>
            <div class="layui-anim" data-anim="layui-anim-fadeout">渐隐</div>
            <div class="code">layui-anim-fadeout</div>
        </li>
        <li>
            <div class="layui-anim" data-anim="layui-anim-rotate">360度旋转</div>
            <div class="code">layui-anim-rotate</div>
        </li>
        <li>
            <div class="layui-anim" data-anim="layui-anim-rotate layui-anim-loop">循环动画</div>
            <div class="code">追加：layui-anim-loop</div>
        </li>
    </ul>


    <script src="../lib/layui/layui.js"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
    <script>
    </script>
</body>


</html>